<!-- 
  @name: 活动中心
  @date: 2020.2.25
 -->
<template>
	<view >
		<image class="bg" src="/pagesAc/static/wxImage/bg-huodong.png" mode="widthFix"></image>
		<!-- 标题栏 -->
		<nav-title :title="title" navigate-back="1" :page-scroll="pageScroll" :back-home="hasIndex"></nav-title>
		
		<view class="content">
			<!-- 分享 -->
			<view class="share-btn" @tap="shareLoading">
				<image src="/pagesAc/static/wxImage/share-bg.png" mode="aspectFill"></image>
				<image src="/pagesAc/static/wxImage/share-msg.png" mode="aspectFill"></image>
				<button type="default" open-type="share"></button>
			</view>
			
			<!-- 充值 -->
			<view class="charge-box">
				<image class="icon-dot left" src="/pagesAc/static/wxImage/icon-dot.png" mode="aspectFill"></image>
				<image class="icon-dot right" src="/pagesAc/static/wxImage/icon-dot.png" mode="aspectFill"></image>
				<view class="charge-btn u-f-dcc" @tap="$">
					<image class="bg-charge" src="/pagesAc/static/wxImage/bg-charge.png" mode="aspectFill"></image>
					<view class="text u-f-jsb">
						<view class="u-f-ac">
							<view  style="color: #FFFEDC;font-size: 28rpx;">
								<text >充:</text>
								<text style="position: relative;top: 2rpx;">¥</text>
								<text style="letter-spacing: 3rpx;margin-right: 10rpx;">1000</text> 
								到账:
							</view>
							<text style="color: #FFE8AF;">¥<text style="color: #FFE8AF;font-size: 36rpx;letter-spacing: 3rpx;">1200</text></text>
						</view>  
						<view>优惠充值</view> 
					</view>
				</view>
				<view class="title">自助加尿素 享SCR维保</view>
				<view class="sub-title">使用尿素加注小程序进行车用尿素加注时，可获得相应积分。</view>
				<view class="join u-f-ac">
					<view>立即参与</view>
					<u-icon name="arrow-right" color="#0F9969"></u-icon>
				</view>
			</view>
			
			<view class="label">
				<image src="/pagesAc/static/wxImage/share-label.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<!-- 领取成功后的弹窗 -->
		<view class="_popup center" v-if="showPopup">
			<view class="popup-info">
				<text class="t1">领取成功</text>
				<text class="t2">可在我的-优惠券中查看使用</text>
				<button class="btn_submit_popup" @tap="showPopup = false">确定</button>
			</view>
		</view>
		
		<!-- 优惠券列表 -->
		<view class="list u-f-dc">
			<block v-for="(item,index) in lists" :key="index">
				<view class="coupon">
					<image class="bg" src="/pagesAc/static/wxImage/bg-coupon.png" mode="aspectFill"></image>
					<view class="coupon-content u-f-ac">
						<view class="coupon-l ">
							<view style="color: #12B77D;font-weight: bold;">¥<text style="font-size: 80rpx;">{{item.couponAmount}}</text></view>
							<view >加注满{{item.couponOrderAmount}}可用</view> 
						</view>
						<view class="coupon-r">
							<view>
								<view class="title">溢通环保运营商</view>
								<view class="time">{{item.useBeginTime}} - {{item.useEndTime}}</view>
							</view>
							<view class="btn unactive">
								<button type="default">立即领取</button>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="tips">
			可在<text>“个人中心-优惠券中”</text>中查看
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="reLogin"></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',  //导航栏标题
				pageScroll: false,  //页面是否上滑，true为已上滑，false为未上滑
				operaId: 0,  //运营商id
				lists: [],  //优惠券列表
				page: 1,  //优惠券页码
				showPopup: false,  //是否显示领取弹窗
				canList: [],  //可用加注站
				isAndroid: false,  //是否为安卓系统
				hasIndex: true,  //是否有首页，若否则显示返回首页icon
			}
		},
		onLoad(e) {
			this.operaId = e.operaId;
			this.hasIndex = this.$hasIndex();
			this.isAndroid = this.$isAndroid();
		
			// this.getList();
		},
		onPageScroll(e) {
			if(e.scrollTop > 50) {
				this.title = '福利专区';
				this.pageScroll = true;
			} else {
				this.title = '';
				this.pageScroll = false;
			}
		},
		onReachBottom() {
			this.getList();
		},
		//分享某个页面的信息
		onShareAppMessage() {
			console.log('分享了');
			return {
				title: '蓝蜘蛛加注-活动中心',
				path: '/pages/activityCenter/activityCenter?operaId=' + this.operaId
			}
		},
		methods: {
			//重新登录
			reLogin() {
				this.lists = [];
				this.page = 1;
				this.getList();
			},
			//点击分享后loading
			shareLoading() {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				});
				setTimeout(() => {
					uni.hideLoading();
				}, this.$tmp.TIME_PUB);
			},
			//领取优惠券
			drawTicket(item, index) {
				if(!this.$store.state.token) {
					this.$store.commit('showLogin', true);
					return;
				}
				if(item.drawType === 0) {
					this.$http({
						url: this.$api.couponUrl + 'receivecoupon',
						data: {
							couponId: item.couponId
						}
					}).then(res => {
						this.showPopup = true;
					});
				}
			},
			//获取优惠券
			getList() {
				if(!this.operaId) return;
				this.$http({
					url: this.$api.couponUrl + 'getoperatorcouponlist',
					data: {
						operaId: this.operaId,
						page: this.page,
						rows: this.$tmp.ROWS_RET
					},
					showLogin: 0
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0) {
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	
	
	.bg {
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 473rpx;
		position: relative;
	}
	.share-btn {
		position: relative;
		width: 572rpx;
		height: 85rpx;
		position: relative;
		>image:nth-child(1) {
			position: absolute;
			top: 0;
			left: 0;
			width: 572rpx;
			height: 85rpx;
		}
		>image:nth-child(2) {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 434rpx;
			height: 42rpx;
		}
		>button {
			position: absolute;
			width: 572rpx;
			height: 85rpx;
			background-color: rgba(0,0,0,0) !important;
		}
	}
	
	.charge-box {
		margin-top: 37rpx;
		width: 710rpx;
		height: 457rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 80rpx; 
		
		.icon-dot {
			width: 53rpx;
			height: 39rpx;
			&.left {
				position: absolute;
				left: 20rpx;
				top: 20rpx;
			}
			&.right {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				transform: rotateY(180deg);
			}
		}
		.charge-btn {
			width: 641rpx ;
			height: 110rpx ;
			position: relative;
			margin-bottom: 89rpx;
			.bg-charge {
				position: absolute;
				top: 0;
				left: 0;
				width: 641rpx;
				height: 110rpx;
				z-index: 0;
			}
			 
			.text {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 0 50rpx 0 30rpx;
				text {
					
					font-weight: bold;
				}
				>view:nth-child(1) {
					transform: skewX(-10deg);
				}
				>view:nth-child(2) {
					color: #905815;
					font-size: 34rpx;
					font-weight: 600;
					margin-right: 10rpx;
				}
			}
		}
		
		.title {
			color: #333333;
			font-size: 36rpx;
			font-weight: bold;
			
		}
		
		.sub-title {
			font-size: 22rpx;
			color: #999999;
			margin-bottom: 30rpx;
		}
		.join {
			font-size: 26rpx;
			color: #0F9969;
		}
		
	}
	/* 优惠券 */
	
	.label {
		margin-top: 50rpx;
		image {
			width: 532rpx;
			height: 23rpx;
		}
	}
	
	.list {
		display: flex;
		align-items: center;
		margin: 50rpx 0;
		
		.coupon {   
			width: 680rpx;
			height: 186rpx;
			position: relative;
			margin-bottom: 30rpx;
			.bg {
				width: 680rpx;
				height: 186rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			.coupon-content {
				position: absolute;
				width: 680rpx;
				height: 186rpx;
				z-index: 1;
				
				.coupon-l {
					width: 186rpx;
					height: 100%;
					padding: 30rpx 0;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					align-items: center;
					>view:last-child {
						font-size: 22rpx;
						font-size: 22rpx;
						color: #666666;
					}
				}
				
				.coupon-r {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					flex: 1;
					overflow: hidden;
					padding: 0 20rpx 0 40rpx;
					.title {
						font-weight: bold;
						font-size: 30rpx;
						margin-bottom: 10rpx;
					}
					.time {
						font-size: 24rpx;
					}
					
					.btn {
						>button{
							width: 160rpx;
							line-height: 60rpx;
							background: linear-gradient(0deg, #F6C375 0%, #FDE098 100%);
							color: #905815;
							border-radius: 25rpx;
							text-align: center;
							font-size: 24rpx;
						}
						&.unactive>button {
							 background: #eee !important;
							 color: #888;
						}
					}
				}
			}
		}
	}
	
	.tips {
		width: 100%;
		color: #999999;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 60rpx;
		>text{
			color: #12B77D;
		}
	}
	
	.no-ticket-list {
		width: 100%;
		padding: 60rpx 0;
		text-align: center;
		color: $color-grey-dark;
	}
	
	/* 领取成功后的弹窗 */
	._popup.center {
		padding-top: 0;
		justify-content: center;
	}
	.popup-info {
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 510rpx;
		height: 450rpx;
		background-color: transparent;
		background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky14VOoGAUmItAABzTFb9ICw538.png');
		.t1 {
			margin-top: 180rpx;
			font-size: 36rpx;
		}
		.t2 {
			margin-top: 36rpx;
			color: $color-grey-dark;
		}
		.btn_submit_popup {
			margin-top: 50rpx;
		}
	}
	
	/* 分享 */
	.share-blank {
		width: 750rpx;
		height: 200rpx;
	}
	.share {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 50rpx;
		z-index: $z-index-public;
		text-align: center;
		.btn {
			width: 630rpx;
			height: 100rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky154fjKAbd3VAABA-hZwwhA015.png');
		}
	}
</style>
